// @see https://tailwindcss.com
import { createRemToPxProcessor } from '@unocss/preset-wind4/utils'
import {
  defineConfig,
  presetAttributify,
  presetWind4,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  // 预设
  presets: [
    // 属性化模式 & 无值的属性模式
    presetAttributify(),
    presetWind4({
      preflights: {
        theme: {
          process: createRemToPxProcessor(4),
        },
      },
    }), // 预设的样式
  ],
  postprocess: [createRemToPxProcessor(4)],
  transformers: [transformerVariantGroup(), transformerDirectives()],
  theme: {
    colors: {
      primary: 'var(--el-color-primary)',
      gray: {
        DEFAULT: '#f1f1f1',
        100: '#f9f9f9',
        200: '#f8f8f8', // 表格选中颜色
        300: '#333', // 全局文字默认颜色
        400: '#f4f4f4', // 卡片边框颜色
        500: '#f1f1f1', // 背景颜色
        600: '#666', // 次文本颜色
        700: '#e3e3e3', // 表格头背景
        800: '#eee', // 边框/分割线颜色
        900: '#999', // 描述文本颜色
      },
      green: 'var(--el-color-success)',
      red: 'var(--el-color-danger)',
    },
    fontSize: {
      '2xs': '0.625rem',
      xs: '0.75rem', // 这里设置 text-xs 的字体大小
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem',
      '2xl': '1.375rem',
      '3xl': '1.5rem',
      '4xl': '1.875rem',
    },
  },
  // 自定义规则
  rules: [],
  // 自定义快捷方式
  shortcuts: {
    // 布局
    'flex-x-center': 'flex justify-center',
    'flex-y-center': 'flex items-center',
    'flex-center': 'flex justify-center items-center',
    'flex-x-start': 'flex-y-center justify-start',
    'flex-x-between': 'flex-y-center justify-between',
    'flex-x-end': 'flex-y-center justify-end',
    'flex-between': 'flex justify-between',
    'flex-col': 'flex flex-col',
    'flex-col-center': 'flex-col justify-center items-center',
    'flex-col-between': 'flex-col justify-between',

    // 绝对定位
    'absolute-tl': 'absolute top-0 left-0',
    'absolute-tr': 'absolute top-0 right-0',
    'absolute-bl': 'absolute bottom-0 left-0',
    'absolute-br': 'absolute bottom-0 right-0',
    'absolute-center': 'absolute-tl flex-center size-full',
    'absolute-bottom': 'absolute bottom-0 left-1/2 -translate-x-1/2',
    'absolute-bottom-full': 'absolute bottom-0 left-0 right-0',
    'absolute-top': 'absolute top-0 left-1/2 -translate-x-1/2',
    'absolute-top-full': 'absolute top-0 left-0 right-0',
    'absolute-left': 'absolute left-0 top-1/2 -translate-y-1/2',
    'absolute-left-full': 'absolute left-0 top-0 bottom-0',
    'absolute-right': 'absolute right-0 top-1/2 -translate-y-1/2',
    'absolute-right-full': 'absolute right-0 top-0 bottom-0',
    'fixed-tl': 'fixed top-0 left-0',
    'fixed-tr': 'fixed top-0 right-0',
    'fixed-bl': 'fixed bottom-0 left-0',
    'fixed-br': 'fixed bottom-0 right-0',
    'fixed-center': 'fixed-tl flex-center size-full',

    // 边框 border-line: 简写bd
    'bd-color': 'border-gray-800',
    'bd-line': 'border-solid border-1 bd-color',
    'bd-gray': 'bd-line bd-color',
    'bd-primary': 'bd-line border-primary',
    'bd-transparent': 'bd-line border-transparent',
    'bd-bottom': 'bd-transparent border-b-gray-800',
    'bd-left': 'bd-transparent border-l-gray-800',
    'bd-right': 'bd-transparent border-r-gray-800',
    'bd-top': 'bd-transparent border-t-gray-800',

    'c-3': 'text-gray-300',
    'c-6': 'text-gray-600',
    'c-9': 'text-gray-900',
  },
})
